<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>演示 setTimeout</title>
	</head>
	<body>
		<input type="button" value="开始执行延时函数" onclick="runDelay()" />
		<input type="button" value="不再炸了" onclick="clearTimer()" />
		<script>
			function runDelay(){
				
				document.write("开始执行函数runDelay <br />");
				// 匿名函数
// 				function(){
// 					document.write("开始执行函数runDelay内的setTimeout <br />");
// 				}

                // 在定时器中的代码是异步代码.未执行之前不影响同步代码的执行.
                // setTimeout一般用于需要延时执行一次的需求
                // setTimeout第一个参数一般为一个函数.普遍写成一个匿名函数
				// 第二个参数为延迟时间.单位为毫秒
				setTimeout(function(){
					document.write("开始执行函数runDelay内的setTimeout <br />");
				}, 3000);
				
				// 未在定时器中执行的代码为同步代码
				// 此行会在setTimeout内的逻辑执行前执行。因为setTimeout只会把内部的执行逻辑推迟执行。
				// 但是并未阻塞当前页面其他的js代码执行
				document.write("结束执行函数runDelay <br />");
			}
			
			document.write("<br />要炸么？<br />");
			
			// 若要随时中止setTimeout的定时效果.需要使用到setTimeout的返回值
			var timer = setTimeout(function(){
				document.write("<br />爆炸是种艺术！！！<br />");
			}, 10000);c
			
			var timer2 = setTimeout(function(){
				document.write("<br />还是不炸吧<br />");
			}, 10000);
			
			// 多个setTimeout的返回值依照声明的顺序.从1开始依次+1
			console.log("第一个setTimeout的返回值" + timer);
			console.log("第二个setTimeout的返回值" + timer2);
			
			function clearTimer(){
				// clearTimeout用于清理setTimeout.传入的参数为对应的setTimeout的返回值.
				clearTimeout(timer);
			}
		</script>
	</body>
</html>
